<template>
    <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="50%"
            @close="handleClose"
    >
        <el-form
                ref="menuFormRef"
                :model="menuForm"
                :rules="menuFormRules"
                label-width="120px"
                status-icon
        >
            <el-form-item label="父级菜单" prop="parentId">
                <el-cascader :options="menuOptions" :props="props1" clearable   v-model="menuForm.parentId" style="width: 100%;"/>

                <span>不选，则直接创建一级菜单</span>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="menuForm.menuType">
                    <el-radio label="1">菜单</el-radio>
                    <el-radio label="2">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="menuForm.menuName" placeholder="请输入"/>
            </el-form-item>
            <template v-if="menuForm.menuType === '1'">
                <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="menuForm.icon" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="路由地址" prop="path">
                    <el-input v-model="menuForm. path" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="组件路径" prop="component">
                    <el-input v-model="menuForm.component" placeholder="请输入"/>
                </el-form-item>
            </template>
            <el-form-item label="权限标识" prop="menuCode">
                <el-input v-model="menuForm.menuCode" placeholder="请输入"/>
            </el-form-item>
            <template v-if="menuForm.menuType === '1'">
                <el-form-item label="菜单状态" prop="menuState">
                    <el-radio-group v-model="menuForm.menuState">
                        <el-radio label="1">正常</el-radio>
                        <el-radio label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script setup name="MenuDialog">
    const { proxy } = getCurrentInstance()
    let dialogVisible = ref(false)
    let dialogTitle = ref('新增')
    let currentAction = ref('add')
    const queryOptions = ref([
        {value: 1, label: '在职'},
        {value: 2, label: '离职'},
        {value: 3, label: '试用期'}
    ])
    const roleOptions = ref([])
    const menuOptions = ref([])
    const props1 = {
        checkStrictly: true,
        label: 'menuName',
        value: '_id'
    }
    const menuForm = ref({
        menuState: '1',
        menuType: '1'
    })
    const menuFormRules = ref({
        menuName: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ]
    })
    const menuFormRef = ref()

    const emit = defineEmits(['submit'])

    onMounted(() => {
        getMenu()
    })

    const handleClose = () => {
        if (menuFormRef.value) {
            menuFormRef.value.resetFields()
        }
        close()
    }
    const addAction = (type, row = {}) => {
        currentAction.value = 'add'
        dialogTitle.value = '新增'
        if (type === 2) {
            menuForm.value.parentId = [...row.parentId, row._id ].filter(item => item)
        }
        open()
    }
    const editAction = (item) => {
        currentAction.value = 'edit'
        dialogTitle.value = '编辑'
        open()
        nextTick(() => {
            Object.assign(menuForm.value, item)
        })
    }

    const open = () => {
        dialogVisible.value = true
    }

    const close = () => {
        dialogVisible.value = false
    }

    const getMenu = async () => {
        menuOptions.value = await proxy.$api.getMenuList()
    }

    const handleSubmit = () => {
        proxy.$refs.menuFormRef.validate(async (valid) => {
            if (valid) {
                const params = toRaw(menuForm.value)
                params.action = currentAction.value
                await proxy.$api.operateMenu(params)
                proxy.$message.success(`${dialogTitle.value}成功`)
                emit('submit')
                close()
            }
        })
    }

    defineExpose({
        addAction,
        editAction
    })
</script>

<style scoped>

</style>
